<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<!-- 新 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="${ctx }/resource/pagejs/bootstrap-table.css">
<script src="${ctx }/resource/pagejs/jquery.js"></script>
<script src="${ctx }/resource/pagejs/bootstrap.min.js"></script>
<script src="${ctx }/resource/pagejs/bootstrap-table.js"></script>
<script src="${ctx }/resource/pagejs/bootstrap-table-zh-CN.js"></script>
<script src="${ctx }/resource/pagejs/bootstrap-table-export.js"></script>
<script src="${ctx }/resource/pagejs/bootbox.min.js"></script>
<script src="http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<title>Insert title here</title>
</head>
<script type="text/javascript">
function paging(){
	$('#table').bootstrapTable('destroy');  
	$('#table').bootstrapTable({
	    url: '${ctx }/user/dataList', // 接口 URL 地址
	    method:'post',
	    queryParamsType:'',
	    contentType: "application/x-www-form-urlencoded",
	  	toolbar:'#toolbar',
	    cache: false, // 不缓存
	    height: 550, // 设置高度，会启用固定表头的特性
	    striped: true, // 隔行加亮
	    pagination: true, // 开启分页功能
	    pageSize: 10, // 设置默认分页为 50
	    pageList:[ 10, 25, 50, 100], // 自定义分页列表
	    search: true, // 开启搜索功能
	    showExport: true,//显示导出按钮  
        exportDataType: "basic",//导出类型    
	    showColumns: true, // 开启自定义列显示功能
	    //showRefresh: true, // 开启刷新功能
	    minimumCountColumns: 2, // 设置最少显示列个数
	  //searchOnEnterKey: true,//ENTER键搜索 
	   	escape: true,//过滤危险字符  
	    clickToSelect: true, // 单击行即可以选中
	    sortName: 'id', // 设置默认排序为 id
	    sortOrder: 'desc', // 设置排序为反序 desc
	    cardView: false,	//是否显示详细视图
	    detailView: false,
	    sidePagination:"server",
	    queryParams:queryParams,
	    columns: [{ // 列设置
	        field: 'state',
	        checkbox: true // 使用复选框
	    }, {
	        field: 'id',
	        title: 'ID',
	        align: 'right',
	        valign: 'bottom',
	        sortable: true // 开启排序功能
	    }, {
	        field: 'user_id',
	        title: '用户名',
	        align: 'center',
	        valign: 'middle'
	    }, {
	        field: 'email',
	        title: '用户邮箱',
	        align: 'left',
	        valign: 'top'
	    },{
	    	field: 'operation',
        	title: '操作',
       		formatter:function(){
            var s = '<a style="color:#449d44;"><span class="glyphicon glyphicon-home"></span>设置角色</a>';
            var d = '<a style="color:#449d44;">删除</a>';
            return s+' '+d;
        }
	  }
        ]
	});
}
$(function(){
	  paging();
});
function refresh(){
	$('#fm')[0].reset();
	$('#table').bootstrapTable('refresh');
}

function search(){
	paging();
}
function queryParams(params){
	return {
		pageSize:params.pageSize,
		pageNumber:params.pageNumber,
		userId:$("#user_Id").val(),
		email:$("#email").val()
	}
}

function editor(){
	var parm="";
	var rows = $("#table").bootstrapTable('getAllSelections');
	if(rows.length != 1 ){
	bootbox.confirm("脑残你选数据了吗？用老子提醒你？", function(result){ 
		/* your callback code */ 
	})
	}else{
		parm+=rows[0].id;
		alert("rows[0].id")
		alert(rows.length)
		alert(1!=2)
		$('#myModal').modal('show');
		$.ajax({  
        type: "POST",  
        url: "${ctx }/user/update", 
        dataType:'json',
        data: {"id":parm},  
        success: function(data){ 
        	
       	$("#id").val(parm);
        $("#model_userId").val(data[0].user_id);
        $("#model_email").val(data[0].email);
        
        }  
     });
	
	}

}
function show(){
	
	var rows = $("#table").bootstrapTable('getAllSelections');
	if(rows.length==0){
		alert("你他妈的选数据了吗");
	}else{
		$('#myModalinfo').modal('show');
	}
}
function del(){
	var parm="";
	var rows = $("#table").bootstrapTable('getAllSelections');
		for(var i in rows){
			parm+=rows[i].id+",";
		}
		$.ajax({
			type:"POST",
			url:"${ctx }/user/delete",
			data:{"id":parm},
			success: function(){
					$('#table').bootstrapTable('refresh');
					alert("删除成功")
			}
		});
}

</script>
<body>
<ol class="breadcrumb">
  <li><span class="glyphicon glyphicon-home"></span></li> 首页
  <li>系统管理</a></li>
  <li class="active">用户管理</li>
<button type="button" class="btn btn-success btn-xs" style="float:right;" onclick="refresh()"><span class="glyphicon glyphicon-refresh"></span> 刷新</button> 
</ol>

<div class="panel panel-success"  >
	<div class="panel-heading " style="background-color:#449d44;">
		<h3 class="panel-title" style="color: white;">面板标题</h3>
	</div>
	<div class="panel-body">
		<form class="navbar-form navbar-left" role="search" id="fm">
         <div class="form-group">
            <input type="text" class="form-control" id="user_Id" name="userId"  placeholder="昵称" >
             <input type="text" class="form-control" id="email" name="email"   placeholder="email">
         </div>
         <button type="button" class="btn btn-success " onclick="search()">查询</button>
      </form>
	</div>
</div>

       
<div id="toolbar" class="btn-group">
            <button id="btn_add" type="button" class="btn btn-success"  data-toggle="modal" data-target="#myModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_edit" type="button" class="btn btn-success"  onclick="editor()">
                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
            </button>
            <button id="btn_delete" type="button" class="btn btn-success" onclick="show()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
            </button>
</div>
<table id="table" ></table>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header" style="background-color:#449d44;">
				<h4 class="modal-title" id="myModalLabel">
                    <span class="glyphicon glyphicon-pushpin" style="font-weight:bold">添加信息</span>
				</h4>
			</div>
			
			<form role="form" id="fm1"  action="/user/save" method="post">
			<div class="modal-body">
			 <div class="form-group">
			 <input type="hidden" class="form-control" id="id" name="id" value="0">
    		<label>用户名：</label><input type="text" class="form-control" id="model_userId" name="userId" >
  			<label>邮箱：</label><input type="text"  class="form-control" id="model_email" name="email" >
			</div>
			  </div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal" >关闭
				</button>
				<button type="submit" class="btn btn-success" >
					提交更改
				</button>
			</div>
			</form>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModalinfo" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title" id="myModalLabel">
					操作提示
				</h4>
			</div>
			<div class="modal-body">
				是否继续删除数据？
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" 
						data-dismiss="modal">你给我滚
				</button>
				<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="del()">
					让你删
				</button>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</body>
</html>